<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>2RTK NTRIP server</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Exo+2:wght@300;400;600&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4DE7FF',
            secondary: '#36CFC9',
            success: '#00F9A6',
            warning: '#FFB74D',
            danger: '#FF5E7D',
            info: '#A0AEC0',
            dark: '#1D2129',
            space: '#0A0F1F',
            stardust: '#1A2138'
          },
          fontFamily: {
            orbitron: ['Orbitron', 'sans-serif'],
            exo: ['Exo 2', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .signal-bar {
        transition: all 0.3s ease;
        transform-origin: bottom;
      }
      .signal-bar:hover {
        transform: scaleY(1.05);
        box-shadow: 0 0 15px rgba(77, 231, 255, 0.5), inset 0 -2px 4px rgba(0,0,0,0.1);
      }
      .pulse-animation {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      @keyframes pulse {
        0%, 100% {
          opacity: 1;
        }
        50% {
          opacity: 0.7;
        }
      }
      .fade-in {
        animation: fadeIn 0.5s ease-in-out;
      }
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }
      .fixed-height-signal-bars {
        height: 140px;
        display: flex;
        align-items: flex-end;
        flex-wrap: nowrap;
        overflow-x: auto;
      }
      .scrollbar-hide::-webkit-scrollbar {
        height: 6px;
      }
      .scrollbar-hide::-webkit-scrollbar-track {
        background: rgba(77, 231, 255, 0.1);
        border-radius: 3px;
      }
      .scrollbar-hide::-webkit-scrollbar-thumb {
        background: rgba(77, 231, 255, 0.5);
        border-radius: 3px;
      }
      .scrollbar-hide::-webkit-scrollbar-thumb:hover {
        background: rgba(77, 231, 255, 0.8);
      }
      @keyframes loading {
        0% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
        100% { transform: translateY(0); }
      }
      .loading-bar {
        animation: loading 1.5s ease-in-out infinite;
      }
      .loading-bar:nth-child(2) { animation-delay: 0.1s; }
      .loading-bar:nth-child(3) { animation-delay: 0.2s; }
      .loading-bar:nth-child(4) { animation-delay: 0.3s; }
      .loading-bar:nth-child(5) { animation-delay: 0.4s; }
      body {
        background: radial-gradient(ellipse at center, #0a0f1f 0%, #050813 70%);
        color: white;
        font-family: 'Exo 2', sans-serif;
      }
      .space-card {
        background: rgba(10, 20, 40, 0.7);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(77, 231, 255, 0.2);
        box-shadow: 0 0 20px rgba(77, 231, 255, 0.1), 
                    inset 0 0 10px rgba(77, 231, 255, 0.05);
      }
      .glow-border {
        position: relative;
      }
      .glow-border::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #4DE7FF, #00F9A6);
        box-shadow: 0 0 10px rgba(77, 231, 255, 0.7);
        border-radius: 3px 3px 0 0;
        z-index: 1;
      }
      .satellite-glow {
        filter: drop-shadow(0 0 5px rgba(77, 231, 255, 0.7));
      }
      .star {
        position: absolute;
        background: white;
        border-radius: 50%;
      }
      .form-input {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: rgba(77, 231, 255, 0.3);
        color: #A0AEC0;
        transition: all 0.3s ease;
      }
      .form-input:focus {
        background-color: rgba(255, 255, 255, 0.15);
        border-color: #4DE7FF;
        box-shadow: 0 0 0 3px rgba(77, 231, 255, 0.3);
        outline: none;
      }
      .form-label {
        color: #4DE7FF;
        margin-bottom: 0.25rem;
        display: block;
      }
      .form-placeholder {
        color: rgba(160, 174, 192, 0.6);
      }
    }
  </style>
</head>
<body class="min-h-screen flex items-center justify-center">
  <div id="stars" class="fixed inset-0 z-0"></div>
  <div class="space-card p-8 rounded-lg shadow-md w-full max-w-sm relative z-10">
    <h2 class="text-2xl font-bold mb-6 text-center font-orbitron tracking-wider">2RTK NTRIP server Login</h2>

    {% if request.method == 'POST' %}
      <div class="bg-red-100 text-red-700 p-3 rounded mb-4 text-sm">
        用户名或密码错误，请重试。
      </div>
    {% endif %}

    <!-- 显示成功信息 -->
    {% if success_message %}
      <div class="bg-green-100 text-green-700 p-3 rounded mb-4 text-sm">
        {{ success_message }}
      </div>
    {% endif %}

    <form method="POST" action="/login" class="space-y-4">
      <div>
        <label class="form-label font-semibold">用户名</label>
        <input type="text" name="username" required
               class="form-input w-full rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
      </div>

      <div>
        <label class="form-label font-semibold">密码</label>
        <input type="password" name="password" required
               class="form-input w-full rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
      </div>

      <button type="submit"
              class="w-full bg-primary text-white py-2 rounded hover:bg-blue-700 transition duration-200">
        登录
      </button>
    </form>

    <!-- 恢复默认配置按钮 -->
    <div class="text-center mt-4 text-sm text-info">
      忘记密码？------------→
      <a href="#" onclick="resetDefaults()" class="text-primary hover:underline">恢复默认配置</a>
    </div>

    <!-- 修改管理员密码按钮 -->
    <div class="text-center mt-4 text-sm text-info">
      <a href="/change_password" class="text-primary hover:underline">修改管理员密码</a>
    </div>
  </div>

  <script>
    async function resetDefaults() {
      if (!confirm("确定要恢复默认配置？这将清空所有设置并重置管理账号和密码为admin")) return;
      try {
        const res = await fetch('/reset_config', { method: 'POST' });
        const result = await res.json();
        alert(result.message || "恢复成功");
        location.reload();  // 可选：刷新页面
        // 发送重启信号
        await fetch('/restart_program', { method: 'POST' });
      } catch (err) {
        alert("恢复失败：" + err.message);
      }
    }
  </script>
</body>
</html>